<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>makedown</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            font-size: 18px;
            font-family: KaiTi;
            font-weight: 400;
        }
        .container {
            position: relative;
            height: 75%;
        }
        .left, .right {
            width: 48%;
            float: left;
            height: 100%;
            overflow: hidden;
            padding: 1%;
        }
        .right {
            background-color: #fcfaf2;
            word-wrap: break-word;
            word-break: break-all;
        }
        .right_div {
            width: 98%;
            height: 100%;
            padding: 1%;
        }
        .left-con-text {
            width: 100%;
            height: 100%;
            font-size: 18px;
            font-family: KaiTi;
            list-style-type: none;
            outline: none;
            border: none;
        }
        .single, .multi {
            border-radius: 20px;
            padding: 5px 15px;
            margin: 10px 0;
            min-width: 10px;
            color: #fff;
            min-height: 20px;
        }
        .single {
            background-color: #67c23a; 
            font-size: 14px;
        }
        .multi {
            background-color: #f56c6c;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .quote {
            background-color: #ccc;
            display: flex;
            flex-direction: row;
            color: #fff;
            background-color: #aaa;
        }
        .quote p {
            margin: 5px;
        }
        .prefix {
            width: 4px;
            border-radius: 2px;
            background-color: #f56c6c;
            margin-right: 5px;
        }
        .header {
            height: 15%;
            width: 100%;
            border-top: 1px solid #ddd;
        }
        .header-top {
            height: 60%;
            background-color: #404040;
            margin-top: -5px;
            padding-bottom: 7px;
            position: relative;
        }
        .header-bto {
            height: 40%;
            background-color: #ddd;
            position: relative;
        }
        .header-bto-left {
            color: #fff;
            padding: 5px 20px;
            background-color: #67c23a;
            border-radius: 2px;
            box-shadow: 0 0 4px #70c53d;
            position: absolute;
            top: 4px;
            left: 2%;
        }
        .header-bto-right {
            color: #fff;
            padding: 5px 20px;
            background-color: #ca6854;
            border-radius: 2px;
            box-shadow: 0 0 4px #cd6b57;
            position: absolute;
            top: 4px;
            left: 52%;
        }
        .header-top-info {
            width: 150px;
            list-style-type: none;
            outline: none;
            padding: 5px 20px;
            font-size: 24px;
            font-weight: 600;
            font-family: KaiTi;
            border: 1px solid #ca6854;
            color: #ca6854;
            border-radius: 30px;
            background-color: #404040;
            font-weight: 500;
            position: absolute;
            top: 15px;
            left: 70px;
        }
        .header-top-info::-webkit-input-placeholder {
            color: #ca6854;
        }
        .header-top img {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 17px;
            left: 20px;
        }
        .tool-tip {
            background-color: #000;
            color: #fff;
            border-radius: 5px;
            text-align: center;
            padding: 5px 0;
            box-shadow: 0px 0px 4px #444;
            z-index: 2;
        }
        .header-right-rule, .header-right-save, .header-right-list {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 4px;
        }
        .header-right-rule {
            right: 150px;
        }
        .header-right-save {
            right: 100px;
        }
        .header-right-list {
            right: 50px;
        }
        .tip {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 150px;
            color: #67c23a;
            border-radius: 10px;
            box-shadow: 0 0 10px #ccc;
            background-color: #fff;
            z-index: 2;
            margin: -75px 0 0 -125px;
            display: none;
        }
        .tip h2 {
            text-align: center; 
            margin: 10px;
            font-weight: 600; 
        }
        #tip-txt {
            padding: 30px;
        }
        #shade {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(50, 50, 50, 0.7);
        }
        #rude {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            margin-top: -150px;
            margin-left: -200px; 
            /* border: 2px solid #ca6854; */
            border-radius: 20px;
            background-color: #fcfaf2;
            color: #f56c6c;
        }
        .rude-left, .rude-right {
            display: flex;
            flex-direction: column;
            width: 42%;
            margin: 4%;
        }
        .rude-left-list, .rude-right-list {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .rude-left-list {
            margin-bottom: 12px; 
        }
        .rude-right-list {
            margin-bottom: 21px;
        }
        .rude-right-code {
            margin-top: 5px;
        }
        .rude-right-code-top {
            height: 8px;
        }
        .rude-right-code-context {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 95%;
            margin-left: 5%;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-top">
            <a id="tooltip2">
                <img src="../../image/title.png" alt="文章标题">
            </a>
            <input class="header-top-info" id="header-info" placeholder="输入文章标题"></input>
            <div id="rude-tip" class="header-right-rule">
                <a id="tooltip6" href="#">
                    <img src="../../image/rule.png" alt="Markdown规则">
                </a>
            </div> 
            <div class="header-right-save">
                <a id="tooltip3" href="#">
                    <img src="../../image/save.png" alt="保存文件">
                </a>
            </div>
            <div class="header-right-list">
                <a id="tooltip1" href="#">
                    <img src="../../image/files.png" alt="文件列表">
                </a>
            </div>           
        </div>
        <div class="header-bto">
            <div class="header-bto-left">
                <div class="header-bto-left-info">Markdown</div>
            </div>
            <div class="header-bto-right">
                <div class="header-bto-right-info">预览</div>
            </div>
        </div>
    </div>
    <div class="container" id="container">
        <div class="left">
            <textarea class="left-con-text" id="left-txt"></textarea>
        </div>
        <div class="right">
            <div class="right_div" id="right-txt"></div>
        </div>
    </div>
    <div class="tip" id="tip">
        <h2>温情提示</h2>
        <hr>
        <div id="tip-txt"></div>
    </div>
    <div id="shade">
        <div id="rude">
            <div class="rude-left">
                <div class="rude-left-list">
                    <span>#</span><span>h1</span>
                </div>
                <div class="rude-left-list">
                    <span>##</span><span>h2</span>
                </div>
                <div class="rude-left-list">
                    <span>###</span><span>h3</span>                
                </div>
                <div class="rude-left-list">
                    <span>####</span><span>h4</span>
                </div>
                <div class="rude-left-list">
                    <span>#####</span><span>h5</span>
                </div>
                <div class="rude-left-list">
                    <span>######</span><span>h6</span>
                </div>
                <div class="rude-left-list">
                    <span>*内容*</span><span>斜体</span>
                </div>
                <div class="rude-left-list">
                    <span>**内容**</span><span>粗体</span>
                </div>    
            </div>
            <div class="rude-right">
                <div class="rude-right-list">
                    <span>***</span><span>hr</span>
                </div>
                <div class="rude-right-list">
                    <span>---</span><span>hr</span>
                </div>
                <div class="rude-right-list">
                    <span>~~内容~~</span><span>删除线</span>
                </div>
                <div class="rude-right-list">
                    <span>></span><span>引用</span>
                </div>
                <div class="rude-right-list">
                    <span>`内容`</span><span>单行代码</span>
                </div>
                <div class="rude-righ-code">
                    <div class="rude-right-code-top">```</div>
                    <div class="rude-right-code-context">
                        <span>内容</span><span>代码段</span>
                    </div>   
                    <div>```</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../comment/tooltip.js"></script>
    <script>
        
        require('./index.js')    
        require('./marked.js')

        var rude = document.getElementById('rude');
        var shade = document.getElementById('shade');
        var rudeTip = document.getElementById('rude-tip');

        rudeTip.addEventListener('click', () => {
            shade.style.display = 'block';
        })

        shade.addEventListener('click', () => {
            shade.style.display = 'none';
        })

        var header = document.getElementById('header-info');
        var timer = null;
        
        header.addEventListener('mouseover', () => {       
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                header.setAttribute('placeholder', '')
                var width = 150;
                var timer = setInterval(() => {
                    width += 10
                    header.style.width = width + 'px'
                    if (width >= 300) {
                        clearInterval(timer)
                    }
                }, 15)
            }, 200)
        })

        header.addEventListener('mouseout', () => {          
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                header.setAttribute('placeholder', '输入文章标题')
                var width = 300;
                var timer = setInterval(() =>{
                    width -= 10
                    header.style.width = width + 'px'
                    if (width <= 150) {
                        clearInterval(timer)
                    }
                }, 15)
            }, 200)
            
        })

        t1.onmouseenter = function () {
            showTooltip(this, "t1", "文件列表", 50, -20, 100);
        };

        t2.onmouseenter = function () {
            showTooltip(this, "t2", "文章题目", 60, 0, 100);
        }

        t3.onmouseenter = function () {
            showTooltip(this, "t3", "保存文件", 50, -15, 100);
        }

        t6.onmouseenter = function () {
            showTooltip(this, "t6", "markdown语法", 50, -25, 120);
        }
    </script>

</body>
</html>